<template>
  <div>
    <div class="top">
      <van-nav-bar fixed left-arrow @click-left="onClickLeft"> </van-nav-bar>
    </div>
    <div class="title">
      <p>添加银行卡</p>
      <p>请绑定持卡人本人的银行卡</p>
    </div>
    <!-- 输入框 -->
    <div class="input">
      <div>
        <span class="cardman">卡号</span>
        <input
          type="text"
          placeholder="输入卡号"
          id="card"
          v-model="bankCard"
          maxlength="16"
        />
        <van-icon name="info-o" />
      </div>
      <div>
        <span class="cardman">支付密码</span>
        <input
          type="password"
          placeholder="请设置支付密码"
          id="pwd"
          v-model="payPassword"
          maxlength="6"
        />
        <van-icon name="photograph" />
      </div>
    </div>

    <!-- 按钮 -->
    <div>
      <van-button type="primary" size="large" @click="addBankCard"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import { Card, Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      bankCard: "",
      payPassword: "",
      index: -1,
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    },
    // 将银行卡信息加入数据库
    addBankCard() {
      const reg = /^\d{16}$/;
      if (!reg.test(this.bankCard)) {
        Toast("输入16位的银行卡号");
        return;
      }
      if (this.payPassword.length !== 6) {
        Toast("请设置6位支付密码");
        return;
      }
      let res = this.$store.dispatch("addBankCard", {
        uid: sessionStorage.getItem("uid"),
        bankCard: this.bankCard,
        payPassword: this.payPassword,
      });
      res
        .then(() => {
          Toast("银行卡绑定成功");
        })
        .catch(() => {
          Toast("银行卡绑定失败");
        });
      setTimeout(() => {
        history.go(-1);
      }, 1000);
    },
  },
};
</script>

<style lang='scss' scoped>
.top {
  height: 13vw;
  .van-nav-bar {
    background-color: transparent;
    background-color: #fff;
    color: #333;

    ::v-deep .van-nav-bar__text,
    ::v-deep .van-nav-bar__title,
    ::v-deep .van-icon {
      color: #333;
    }
  }
  ::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0px;
  }
}

//中上部文字
.title {
  margin: 0 auto;
  margin-top: 10vh;
  text-align: center;
  p {
    margin: 2vh auto;
  }
}

//输入框
.input {
  width: 90vw;
  margin: 5vw auto;
  padding: 3vw;

  div {
    padding: 3vw;
    border-bottom: 0.5px solid #ddd;

    .cardman {
      width: 24vw;
      display: inline-block;
    }

    input {
      display: inline-block;
      width: 50vw;
      border: none;
    }

    .van-icon:before {
      position: absolute;
      top: -13px;
    }
  }
}
//按钮
.van-button {
  width: 60vw;
  display: block;
  margin: 5vw auto;
  border-radius: 2vw;
}
::v-deep .van-button--primary {
  background-color: #f5b400;
  border: 1px solid #f5b400;
}
</style>